<template>
  <div class="w-full h-full flex flex-col">
    <titleBar :showback="true">影厅信息</titleBar>
    <div class="content-box flex-1 overflow-auto">
      <div
        class="border-0 border-b border-solid border-gray-200"
        v-for="(item, index) in hallInfoList"
        :key="item.id"
        @click="getThisHallMovie(item.id, item.hall_name, item.address)"
      >
        <div class="h-[124px] flex flex-col justify-around ml-[10px]">
          <div>{{ item.hall_name }}</div>

          <div class="text-[14px] text-gray-400 truncate w-[300px]">
            {{ item.address }}
          </div>
          <!-- 影厅标签 -->
          <ul class="">
            <li class="flex justify-start space-x-2">
              <div
                class="
                  text-[#589daf]
                  border border-solid border-blue-400
                  text-[14px]
                "
                v-for="label in labelList[index]"
                :key="label"
              >
                {{ label }}
              </div>
              <!-- <div
                class="
                  text-[#ff9900]
                  border border-solid border-orange-400
                  text-[14px]
                "
              >
                标签3
              </div> -->
            </li>
          </ul>
          <div class="flex justify-start relative">
            <img
              src="../assets/img/card.png"
              class="w-[16px] h-[16px] absolute top-[0.7px]"
              alt=""
            />
            <div class="text-[14px] text-gray-400 ml-[14px]">
              开卡特惠，首单1张票最高立减2元起
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Collapse, CollapseItem } from "vant";
import titleBar from "../components/title-bar.vue";
import API from "../utils/API/index.js";
import { ref, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
//获取路由管理对象
const router = useRouter();
const route = useRoute();
const hallInfoList = ref([]);
const labelList = ref([]);
//获取所有影厅信息
API.hallinfo.getAllHallInfo().then((res) => {
  // console.log(res);
  hallInfoList.value = res;
  
  // hallInfoList.value.forEach((item, index) => {
    
  //   labelList.value.push([...res[index].tags.split(",")]);
  // });
 
});
const getThisHallMovie = (hid, hallname, address) => {
  router.push({
    name: "hallmovie",
    query: {
      hid: hid,
      hallname: hallname,
      halladdress: address,
    },
  });
};
</script>

<style scoped>
</style>